<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/material-design-icons/2.2.3/iconfont/material-icons.css">
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css"/>
    <title>首页</title>
</head>
<body>
<div class="header">
    <div class="header-content">
        <div class="header-content-left">
            您好，欢迎光临萌萌鲜花商城！ <span>[登录]</span> <span>[免费注册]</span>
        </div>
        <div>
            <img src="../img/phone.png" alt="phone"/> 010-890897
            <span>我的账户</span>
            <span>我的订单</span>
            <span>我的购物车</span>
            <span>收藏本站</span>
            <span>客服中心</span>
            <span>帮助中心</span>
        </div>
    </div>
</div>
<div class="top">
    <div class="top-function">
        <div><img src="../img/logo.png" alt="logo"/></div>
        <div class="top-center">
            <div class="function-search">
                <a href="#">商品</a>
                <input type="text" placeholder="查找您需要的商品"/>
                <a href="#">搜索 <img src="../img/search.png" alt=""/></a>
            </div>
            <div class="function-shopping">
                <img src="../img/shopping-cart.png" alt=""/> 我的购物车 <img src="../img/daosanjiao.png" alt=""/>
            </div>
            <div class="hot-search">
                热门搜索： <span>鲜花配送</span> <span>鲜花包月</span> <span>爱情鲜花</span> <span>一夜情</span> <span>送好友闺蜜</span>
            </div>
        </div>
        <div class="qr-code">
            <img src="../img/qr-code.png" alt="qr-code"/>
        </div>
    </div>
    <div class="top-nav">
        <div>所有商品分类</div>
        <div>
            <ul>
                <li>首页</li>
                <li>全部鲜花</li>
                <li>爱情鲜花</li>
                <li class="nav-active">生气鲜花</li>
            </ul>
        </div>
    </div>
</div>
<div class="lunbo">
    <div id="container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div style="background: url('../img/index/lunbo1.png');width: 100%;height: 100%;background-size: 100% 100%"></div>
            </div>
            <div class="swiper-slide">
                <div style="background: url('../img/index/lunbo1.png');width: 100%;height: 100%;background-size: 100% 100%"></div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="main-box">
    <div class="floor1">
        <div class="floor-title">
            <img src="../img/index/floor1.png" alt=""/>
            <hr/>
            <span>MORE></span>
        </div>
        <div class="floor-box">
        </div>
    </div>
    <div class="floor2">
        <div class="floor-title">
            <img src="../img/index/floor2.png" alt=""/>
            <hr/>
            <span>MORE></span>
        </div>
        <div class="floor-box">
        </div>
    </div>
    <div class="floor3">
        <div class="floor-title">
            <img src="../img/index/floor3.png" alt=""/>
            <hr/>
            <span>MORE></span>
        </div>
        <div class="floor-box">
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-top">
        <div class="footer-img">
            <div><img src="../img/footer-1.png" alt=""/> <br/>退赔承诺</div>
            <div><img src="../img/footer-2.png" alt=""/> <br/>免费送货</div>
            <div><img src="../img/footer-3.png" alt=""/> <br/>正品保证</div>
        </div>
        <hr/>
        <div class="footer-text">
            <div>
                <ul>
                    <li>新手入门</li>
                    <li>公司介绍</li>
                    <li>关于我们</li>
                    <li>购物流程</li>
                    <li>交易付款</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>配送方式</li>
                    <li>厂家商家通知</li>
                    <li>接货须知</li>
                    <li>运费通知</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>支付方式</li>
                    <li>支付宝</li>
                    <li>财付宝</li>
                    <li>银行转账</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>售后服务</li>
                    <li>退换货政策</li>
                    <li>退换货流程</li>
                    <li>退款申请</li>
                    <li>退款方式</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bottom-banquan">
        copyright@2016 鲜花商务有限公司 版权所有
    </div>
    <div class="bottom-banquan">
        网络备案/许可证号：ICP备14001893
    </div>
    <div class="bottom-banquan">
        <img src="../img/bottom-1.png" alt=""/>
        <img src="../img/bottom-2.png" alt=""/>
        <img src="../img/bottom-3.png" alt=""/>
    </div>
</div>
<div class="right-box">
    <div><img src="../img/right-box/huiyuan.png" /></div>
    <div class="shop-cart">
        <img src="../img/right-box/shop-cart.png" />
        购<br/>物<br/>车<br/>
        <span>0</span>
    </div>
    <div><img src="../img/right-box/heart.png" alt=""/></div>
    <div><img src="../img/right-box/monney.png" alt=""/></div>
    <div><img src="../img/right-box/kefu.png" alt=""/></div>
    <div><img src="../img/right-box/phone.png" alt=""/></div>
    <div><img src="../img/right-box/weixin.png" alt=""/></div>
</div>
</body>
<script src="../js/jquery-1.10.1.js"></script>
<script src="../js/index.js"></script>
<script src="../js/swiper.min.js"></script>
<script>
    var myswiper=new Swiper('#container',{
        loop:true,
        autoplay:5000,
        pagination: '.swiper-pagination',
        paginationType:'bullets',//默认是bullets原点,progress进度条
        paginationClickable:true,//设置进度原点可以点击切换
        paginationBulletRender:function(index,test){
            return '<span class="swiper-pagination-bullet"></span>';//分页器传入的类名用这个
        }
    })
</script>
</html>